<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dataset</title>
    <script src="./js/echarts.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    const chart = echarts.init(document.getElementById("chart"));
    chart.setOption({
      dataset: {
        source: [
          ["一季度", 10, 40, "一", 50],
          ["二季度", 20, 50, "二", 50],
          ["三季度", 30, 40, "三", 50],
          ["四季度", 40, 60, "四", 50],
        ],
      },
      title: {
        text: "标题",
      },
      xAxis: {
        type: "category", // 分类图
      },
      yAxis: {
        max: 100,
      },
      // 数据
      series: [
        {
          type: "pie", // 饼图
          center: ["50%", 80], // X Y位置
          radius: 35, // 半径
          encode: {
            itemName: 3, // 对应第三列
            value: 4, // 对应第四列
          },
        },
        {
          type: "line", // 折线图
          encode: {
            x: 0,
            y: 2,
          },
          smooth: true, // 平滑
        },
        {
          type: "bar",
          encode: {
            x: 0,
            y: 1,
          },
        },
      ],
    });
  </script>
</html>
